<template>
  <div class="role">
    <!-- 操作区 -->
    <el-form label-width="80px" v-show="flag">
      <el-form-item label="角色名称">
        <el-input v-model="roleName" placeholder="请输入角色名称" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="权限字符">
        <el-input v-model="roleKey" placeholder="请输入权限字符" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="status" placeholder="角色状态" size="small" clearable>
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          size="small"
          clearable
          v-model="valueD"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="listSearch">搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
    </el-form>

    <!-- 操作区显示隐藏 -->
    <div class="controlBox">
      <el-tooltip class="item" effect="dark" content="隐藏搜索" placement="top">
        <el-button icon="el-icon-search" circle size="small" @click="ctrl"></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button icon="el-icon-refresh" circle size="small" @click="reset"></el-button>
      </el-tooltip>
    </div>

    <!-- 表格 -->
    <el-table stripe border :data="tableData" v-loading="tableLoading">
      <el-table-column
          type="selection"
          min-width="4%"
          align="center"
      ></el-table-column>
      <el-table-column label="角色编号" align="center" prop="roleId" min-width="10%"></el-table-column>
      <el-table-column label="角色名称" prop="roleName" min-width="10%"></el-table-column>
      <el-table-column label="权限字符" prop="roleKey" min-width="10%"></el-table-column>
      <el-table-column label="显示顺序" prop="roleSort" min-width="7%"></el-table-column>
      <el-table-column label="状态"align="center" min-width="10%">
        <template>
          <el-switch v-model="valueSwitch" active-color="#409EFF" inactive-color="#DCDFE6"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" align="center" min-width="13%"></el-table-column>
      <el-table-column label="操作" min-width="26%" align="center" ></el-table-column>
    </el-table>

    <!-- 分页区 -->
    <el-pagination
      background
      layout="total,sizes, prev, pager, next, jumper"
      :page-size.sync="pagination.pageSize"
      :total="pagination.total"
      :current-page.sync="pagination.pageNum"
      @current-change="init"
      @size-change="init"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "Role",
  data() {
    return {
      // 操控栏相关
      flag: true,
      valueSwitch:true,
      roleName: "",
      roleKey: "",
      status: "",
      valueD: "",
      // 表格相关
      tableData: [],
      tableLoading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
    };
  },
  methods: {
    ctrl(){
      this.flag=!this.flag;
    },
    // 重置按钮
    reset(){
      this.pagination.pageNum=1;
      this.pagination.pageSize=10;
      this.init();
      this.roleName='';
      this.roleKey='';
      this.status='';
      this.valueD='';
    },
    // 根据当前页&每页展示条数，从服务器获取列表数据
    async init() {
      this.tableLoading = true;
      try {
        let { pageNum, pageSize } = this.pagination;
        let { code, rows, total } = await this.$http.role.list(
          pageNum,
          pageSize
        );
        if (code === 200) {
          // console.log(rows);
          this.pagination.total = total;
          this.tableData = rows;
        } else {
          this.pagination.total = 0;
          this.tableData = [];
        }
      } catch (_) {
        _;
      }
      this.tableLoading = false;
    },
    // 搜索功能
    async listSearch(){
      try {
        let { pageNum, pageSize } = this.pagination;
        let roleName=this.roleName;
        let roleKey=this.roleKey;
        let status=this.status;
        let inputValue=this.input;
        let beginTime=this.valueD[0].toLocaleDateString().replace('/','-').replace('/','-');
        let endTime=this.valueD[1].toLocaleDateString().replace('/','-').replace('/','-');
        let { code, rows, total } = await this.$http.role.listSearch(
          pageNum,
          pageSize,
          roleName,
          roleKey,
          status,
          beginTime,
          endTime
        );
        if (code === 200) {
          // console.log(rows);
          this.pagination.total = total;
          this.tableData = rows;
        } else {
          this.pagination.total = 0;
          this.tableData = [];
        }
      } catch (_) {
        _;
      }
    },
  },
  created() {
    this.init();
  }
};
</script>

<style lang="less" scoped>
.role {
  width: 100%;
  margin: 10px;
  margin-top:0;
}
.el-form {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  display: flex;
  background-color: #fff;
  padding: 10px;
  .el-button {
    height: 30px;
    margin-top: 5px;
    margin-left: 7px;
  }
}
.controlBox {
  width: 100%;
  height: 45px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 10px;
  text-align: right;
}
.el-table {
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
  padding: 15px 20px 20px 20px;
  box-sizing: border-box;
}
/deep/.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  font-size: 14px;
  color: #606266;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  font-weight: 700;
}
.el-pagination {
  background-color: #fff;
  text-align: right;
  padding-top: 30px;
  padding-bottom: 80px;
}
</style>